<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频解析服务 - 首页</title>
    <link href="/static/bootstrap5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
        <div class="container">
            <a class="navbar-brand" href="/">视频解析服务</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link active" href="/">服务状态</a></li>
                    <li class="nav-item"><a class="nav-link" href="/parse-test">解析测试</a></li>
                    <li class="nav-item d-none" id="userManageNav"><a class="nav-link" href="/user-manage">用户管理</a></li>
                    <li class="nav-item d-none" id="ipBlacklistNav"><a class="nav-link" href="/ip-blacklist">IP黑名单</a></li>
                    <li class="nav-item d-none" id="configManageNav"><a class="nav-link" href="/config-manage">配置管理</a></li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item" id="loginBtnNav"><a class="nav-link" href="/login">登录</a></li>
                    <li class="nav-item d-none" id="userInfoNav">
                        <span class="nav-link" id="userInfo"></span>
                    </li>
                    <li class="nav-item d-none" id="logoutBtnNav">
                        <button class="btn btn-outline-light btn-sm" id="logoutBtn">退出登录</button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 服务状态卡片 -->
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card bg-success text-white h-100">
                    <div class="card-body">
                        <h5 class="card-title">服务状态</h5>
                        <p class="card-text display-6">正常运行</p>
                        <p class="card-text small">API地址：http://localhost:5000</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card bg-info text-white h-100">
                    <div class="card-body">
                        <h5 class="card-title">当前时间</h5>
                        <p class="card-text display-6" id="currentTime"></p>
                        <p class="card-text small">更新频率：1秒</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card bg-warning text-dark h-100">
                    <div class="card-body">
                        <h5 class="card-title">解析记录总数</h5>
                        <p class="card-text display-6" id="parseCount">0</p>
                        <p class="card-text small">从数据库读取</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card bg-danger text-white h-100">
                    <div class="card-body">
                        <h5 class="card-title">IP黑名单数</h5>
                        <p class="card-text display-6" id="blacklistCount">0</p>
                        <p class="card-text small">包含临时/永久拉黑</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快速操作区 -->
        <div class="card mt-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">快速操作</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-auto">
                        <a href="/parse-test" class="btn btn-primary">视频解析测试</a>
                    </div>
                    <div class="col-auto">
                        <a href="http://localhost:5000/zxq.php" target="_blank" class="btn btn-secondary">查看小程序配置</a>
                    </div>
                    <div class="col-auto d-none" id="configBtn">
                        <a href="/config-manage" class="btn btn-success">修改系统配置</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/bootstrap5/js/bootstrap.bundle.min.js"></script>
    <script>
        // 1. 更新当前时间
        function updateCurrentTime() {
            const now = new Date();
            document.getElementById('currentTime').textContent = now.toLocaleString();
        }
        setInterval(updateCurrentTime, 1000);
        updateCurrentTime();

        // 2. 权限控制（根据JWT显示菜单）
        async function checkAuth() {
            const token = localStorage.getItem('access_token');
            const loginBtnNav = document.getElementById('loginBtnNav');
            const userInfoNav = document.getElementById('userInfoNav');
            const logoutBtnNav = document.getElementById('logoutBtnNav');
            const userManageNav = document.getElementById('userManageNav');
            const ipBlacklistNav = document.getElementById('ipBlacklistNav');
            const configManageNav = document.getElementById('configManageNav');
            const configBtn = document.getElementById('configBtn');

            if (token) {
                // 已登录：隐藏登录按钮，显示用户信息和退出按钮
                loginBtnNav.classList.add('d-none');
                userInfoNav.classList.remove('d-none');
                logoutBtnNav.classList.remove('d-none');

                // 获取用户信息判断是否为管理员
                try {
                    const response = await fetch('/users/me', {
                        headers: { 'Authorization': `Bearer ${token}` }
                    });

                    if (!response.ok) {
                        throw new Error('Token无效');
                    }

                    const user = await response.json();
                    document.getElementById('userInfo').textContent = `当前用户：${user.username}`;

                    // 管理员显示管理菜单
                    if (user.is_admin) {
                        userManageNav.classList.remove('d-none');
                        ipBlacklistNav.classList.remove('d-none');
                        configManageNav.classList.remove('d-none');
                        configBtn.classList.remove('d-none');
                    }
                } catch (err) {
                    // Token无效，清除存储
                    localStorage.removeItem('access_token');
                    localStorage.removeItem('token_type');
                    window.location.href = '/login';
                }

                // 3. 加载统计数据（解析记录数、黑名单数）
                loadStatsData(token);
            } else {
                // 未登录：跳转到登录页
                window.location.href = '/login';
            }
        }

        // 4. 加载统计数据
        async function loadStatsData(token) {
            try {
                // 解析记录总数
                const parseCountRes = await fetch('/api/parse/count', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });
                const parseCountData = await parseCountRes.json();
                document.getElementById('parseCount').textContent = parseCountData.count || 0;

                // IP黑名单数
                const blacklistRes = await fetch('/admin/blacklist', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });
                const blacklistData = await blacklistRes.json();
                document.getElementById('blacklistCount').textContent = blacklistData.data?.length || 0;
            } catch (err) {
                console.error('加载统计数据失败：', err);
            }
        }

        // 5. 退出登录
        document.getElementById('logoutBtn').addEventListener('click', () => {
            localStorage.removeItem('access_token');
            localStorage.removeItem('token_type');
            window.location.href = '/login';
        });

        // 页面加载时检查权限
        checkAuth();
    </script>
</body>
</html>
    